//页面加载  
$(function() {

	Search(0);
});
// 查询船舶的二维吃水数据
function Search(value) {
	$.messager.progress();
	var Name = [ '缆绳1', '缆绳2', '缆绳3', '缆绳4' ];
	var color = [ '#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc',
			'#7049f0', '#7049f0', '#7049f0' ];
	var data = {
		// ['国家目标', '海南目标', '完成情况']
		"第一监测点" : [ 65, 60, 76.5, 70 ],
		"第二监测点" : [ 93, 93, 93.4, 80 ],
		"第三监测点" : [ 87, 87, 88.3, 60 ],
		"第四监测点" : [ 36, 36, 36.4, 30 ],
		"第五监测点" : [ 36, 36, 36.4, 34 ],
		"第六监测点" : [ 36, 36, 36.4, 40 ],
	};

	var xAxisData = [];
	var data1 = [], data2 = [], data3 = [], data4 = [];

	for ( var i in data) {
		xAxisData.push(i);
		data1.push(data[i][0]);
		data2.push(data[i][1]);
		data3.push(data[i][2]);
		data4.push(data[i][3]);
	}

	var label = {
		normal : {
			show : false,
			position : 'right',
			distance : 30,
			formatter : function(param) {
				return param.value + '%';
			},
			textStyle : {
				color : '#ffffff',
				fontSize : '16',
			}
		}
	};

	var series = [];
	for (var j = 1; j < 5; j++) {
		if (j == 1) {
			var symbolOffset = [ -46, 0 ];
			var dataArr = data1
		} else if (j == 2) {
			var symbolOffset = [ -15, 0 ];
			var dataArr = data2
		} else if (j == 3) {
			var symbolOffset = [ 15, 0 ];
			var dataArr = data3
		} else if (j == 4) {
			var symbolOffset = [ 46, 0 ];
			var dataArr = data4
		}

		series.push({
			name : Name[j - 1],
			type : 'bar',
			stack : j,
			xAxisIndex : 0,
			data : dataArr,
			label : label,
			barWidth : 10,
			barGap : 2,
			itemStyle : {
				normal : {
					color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
						offset : 0,
						color : color[j * 2 - 2]
					}, {
						offset : 1,
						color : color[j * 2 - 1]
					} ]),
				}
			},
		// z: 2
		}, {// 小球的部分
			name : Name[j - 1],
			type : 'scatter',
			stack : j,
			xAxisIndex : 1,
			symbolOffset : symbolOffset, // 相对于原本位置的偏移量
			data : [ 0, 0, 0, 0, 0, 0 ],
			label : {
				normal : {
					show : false,
				}
			},
			xAxisIndex : 2,
			symbolSize : 14,
			itemStyle : {
				normal : {
					borderColor : '#fff',
					borderWidth : 2,
					color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
						offset : 0,
						color : color[j * 2 - 2]
					}, {
						offset : 1,
						color : color[j * 2 - 1]
					} ]),
					opacity : 1,
				}
			},
		// z: 2
		}, {// 大球的位置
			name : Name[j - 1],
			type : 'scatter',
			hoverAnimation : false,
			data : [ 1.2, 1.2, 1.2, 1.2, 1.2, 1.2 ],
			xAxisIndex : 1,
			symbolOffset : symbolOffset, // 相对于原本位置的偏移量
			symbolSize : 24,
			itemStyle : {
				normal : {
					color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
						offset : 0,
						color : color[j * 2 - 2]
					}, {
						offset : 1,
						color : color[j * 2 - 1]
					} ]),
					opacity : 1,
				}
			},
		// z: 2
		})
	}
	var option = {
		backgroundColor : '#142058',
		title : {
			text : '绳索受力监测',
			x : '10',
			y : '10',
			textStyle : {
				fontWeight : 'normal',
				fontSize : 24,
				color : "#fff",
			}
		},
		grid : {
			left : '3%',
			right : '3%',
			bottom : '10%',
			top : '10%',
			containLabel : true
		},
		tooltip : {
			show : "true",
			trigger : 'axis',
			axisPointer : { // 坐标轴指示器，坐标轴触发有效
				type : 'shadow', // 默认为直线，可选为：'line' | 'shadow'
				shadowStyle : {
					color : 'rgba(112,112,112,0)',
				},
			},
			// formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}:
			// {c2}%',
			formatter : function(params) {
				var unit = params[0].name.substring(
						params[0].name.indexOf('(') + 1, params[0].name
								.indexOf(')'));
				return params[0].name + ' ：<br />' + params[0].seriesName
						+ ' ：' + params[0].data + unit + '<br />'
						+ params[1].seriesName + ' ：' + params[1].data + unit
						+ '<br />' + params[2].seriesName + ' ：'
						+ params[2].data + unit + '<br />'
						+ params[3].seriesName + ' ：' + params[3].data + unit;
			},
			backgroundColor : 'rgba(0,0,0,0)', // 背景
			padding : [ 8, 10 ], // 内边距
			extraCssText : 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
		},
		legend : {
			top : 20,
			textStyle : {
				color : '#fff',
			},
			data : Name,
			selectedMode : false,

		},
		xAxis : [ {
			type : 'category',
			position : 'top',
			axisTick : {
				show : false
			},
			axisLine : {
				show : true,
				lineStyle : {
					color : '#363e83',
					width : '28'
				}
			},
			axisLabel : {
				inside : false,
				textStyle : {
					color : '#bac0c0',
					fontWeight : 'normal',
					fontSize : '18',

				},
			},
			data : xAxisData
		}, {
			type : 'category',
			axisLine : {
				show : false
			},
			axisTick : {
				show : false
			},
			axisLabel : {
				show : false
			},
			splitArea : {
				show : false
			},
			splitLine : {
				show : false
			},
			data : xAxisData
		}, {
			type : 'category',
			axisLine : {
				show : false
			},
			axisTick : {
				show : false
			},
			axisLabel : {
				show : false
			},
			splitArea : {
				show : false
			},
			splitLine : {
				show : false
			},
			data : xAxisData
		} ],
		yAxis : {
			type : 'value',
			inverse : 'true',
			axisTick : {
				show : false
			},
			axisLine : {
				show : true,
				lineStyle : {
					color : '#32346c',
				}
			},
			splitLine : {
				show : true,
				lineStyle : {
					color : '#32346c ',
				}
			},
			axisLabel : {
				textStyle : {
					color : '#bac0c0',
					fontWeight : 'normal',
					fontSize : '12',
				},
			},
		},
		series : series

	};
	var chartxy = echarts.init(document.getElementById('poseXY'));
	// var chartxz = echarts.init(document.getElementById('poseXZ'));
	$.messager.progress('close');
	chartxy.setOption(option);
	window.addEventListener('resize', function() {
		chartxy.resize();
	});
}

// 清空查询条件
function ClearCondition() {
	$(" input[ type='text' ] ").val('');
	$("#txtEndTime").datebox("setValue", '');
}